<template>
  <div class="kt-tbl-wrap">
    <el-table :data="tableData" border  v-bind="$attrs" v-on="$listeners" ref="table">
      <el-table-column
        v-if="showIndex"
        type="index"
        label="序号"
        width="60">
      </el-table-column>
      <el-table-column
        v-if="showSelect"
        type="selection"
        width="60">
      </el-table-column>
      <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        v-bind="item.$attrs || {}"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
                <slot v-if="item.isSlot" :name="item.prop" v-bind:row="scope.row"></slot>
                <span v-else-if="item.formatter" >{{item.formatter(scope.row[item.prop],scope.row)}}</span>
                <span v-else >{{scope.row[item.prop]}}</span>
        </template>
      </el-table-column>
     <slot  name="tblOptions"></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ktTable",
  props: {
    tableData: {
      type: Array,
      default: ()=>[],
    },
    columns: {
      type: Array,
      default: [],
    },
    showIndex:{ // 显示 序号
      type:Boolean,
      default:false
    },
    showSelect:{ // 显示 选框
      type:Boolean,
      default:false
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
</style>